<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!-- 引入jstl库 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            padding-top: 20px;
            background: #2aabd2;
        }
        .register{
            width: 760px;
            height: 600px;
            border-radius: 20px;
            background: aqua;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -380px;
            margin-top: -300px;
            background: rgba(0,0,0,0.3);
        }

        .register h2{
            color: #ffffff;
            display: block;
            margin-bottom: 40px;
        }

        .register .input-group{
            width: 60%;
            margin-left: 20%;
            margin-bottom: 60px;
        }

        .register .btn{
            width: 60%;
            margin-left: 20%;
            height:40px;
            margin-bottom: 40px;
        }

        .futer_alert{
            display: block;
            align-content: center;
            width: 100%;
            text-align: center;
            color: yellow;
            font-weight: 700;
        }

        .al{
            height: 60px;
            width: 200px;
            position: absolute;
            top: 20px;
            left: 46%;
            background: green;
            border-radius: 10px;
            color: white;
            text-align: center;
            align-content: center;
            font-size: 16px;
            line-height: 60px;
            display: none;
            margin-top: 20px;
        }
    </style>
</head>
<body>


<div class="register">
    <h2 align="center">找回密码</h2>

    <div class="input">
        <form method="post" action="forgetPwdSubmid">

            <c:if test="${status==null || (status=='用户账号尚未激活或已被禁用' || status=='用户尚未注册')}">

                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon1">邮件地址</span>
                    <c:if test="${email!=null}">
                        <input type="text" class="form-control"  aria-describedby="sizing-addon1" required="required" name="email" value="${email}" id="email">
                    </c:if>

                    <c:if test="${email==null}">
                        <input type="text" class="form-control"  aria-describedby="sizing-addon1" required="required" name="email" id="email">
                    </c:if>

                </div>
            </c:if>

            <c:if test="${status!=null}">

                <div class="input-group input-group-lg" style="display: none">
                    <span class="input-group-addon" id="sizing-addon1">邮件地址</span>
                    <c:if test="${email!=null}">
                        <input type="text" class="form-control"  aria-describedby="sizing-addon1" required="required" name="email" value="${email}" id="email">
                    </c:if>

                    <c:if test="${email==null}">
                        <input type="text" class="form-control"  aria-describedby="sizing-addon1" required="required" name="email" id="email">
                    </c:if>

                </div>

            </c:if>


           <c:if test="${status!=null}">
               <c:if test="${status!='用户账号尚未激活或已被禁用' && status!='用户尚未注册'}">
                   <div class="input-group input-group-lg">
                       <span class="input-group-addon" id="sizing-addon2">验证码</span>
                       <input type="text" class="form-control"  aria-describedby="sizing-addon1" required="required" name="code" id="code">
                   </div>

                   <div class="input-group input-group-lg">
                       <span class="input-group-addon" id="sizing-addon4">输入密码</span>
                       <input type="password" class="form-control"  aria-describedby="sizing-addon1" required="required" name="pwd" id="pwd" maxlength="10" minlength="6" placeholder="请输入6-10位长度密码">
                   </div>

                   <div class="input-group input-group-lg">
                       <span class="input-group-addon" id="sizing-addon3">确认密码</span>
                       <input type="password" class="form-control"  aria-describedby="sizing-addon1" required="required" name="rePwd" id="rePwd" maxlength="10" minlength="6" placeholder="确认密码">
                   </div>


                   <button class="btn btn-success" type="button" onclick="send()" id="found">重置密码</button>
                   <p class="futer_alert">注意：邮件已发送，请到邮箱中获取验证码信息，验证码有效期为10分钟</p>
               </c:if>
           </c:if>

            <c:if test="${status==null || (status=='用户账号尚未激活或已被禁用' || status=='用户尚未注册')}">
                <button class="btn btn-success" type="submit" id="found">发送验证码</button>
            </c:if>
        </form>
    </div>
</div>

<div class="al" id="al">
    保存成功
</div>

<script>
    var button = document.getElementById("found");

    $('#rePwd').bind('input propertychange',function() {
        if ($('#rePwd').val()!=$('#pwd').val()){
            $('#rePwd').css('color','red');
        }else {
            $('#rePwd').css('color','black');
        }
    });

    if(${status!=null && status=='邮件发送成功'}){

        setTimeout(hiddenAl,2000);
        (document.getElementById("al")).style.backgroundColor="green";
        (document.getElementById("al")).innerText="${status}";
        (document.getElementById("al")).style.display="block";
    }else {
        if (${status!=null && status!='邮件发送成功'}){
            setTimeout(hiddenAl,2000);
            (document.getElementById("al")).style.backgroundColor="red";
            (document.getElementById("al")).innerText="${status}";
            (document.getElementById("al")).style.display="block";
        }
    }

    function hiddenAl(){
        (document.getElementById("al")).style.display="none";
    }


    function send() {
        if ($('#rePwd').val()!=$('#pwd').val()){
            setTimeout(hiddenAl,2000);
            (document.getElementById("al")).style.backgroundColor="red";
            (document.getElementById("al")).innerText="两次密码输入不一致";
            (document.getElementById("al")).style.display="block";
            return;
        } else {
            button.type = 'submit';
        }
    }



</script>

</body>
</html>